import React, { Component } from 'react';
import { 
  Form,
  Input,
  Button,
  Select
} from "antd";

const Option = Select.Option;
const FormItem = Form.Item;

class ProjectForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false
    }
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      const { handleOk, editData } = this.props;
      this.setState({
        loading: true
      })
      if (!err) {
        if (editData && editData.id) values.id = editData.id;
        // if (editData && typeof editData.status === 'number') values.status = editData.status;
        console.log('values', values);
        console.log('editData', editData);
        
        handleOk(values, () => {
          this.setState({
            loading: false
          })
        });
      }
    })
  }

  render() {

    const { getFieldDecorator } = this.props.form;
    const { editData } = this.props;
    const { loading } = this.state;

    return(
      <Form
        onSubmit={this.handleSubmit}
      >
        <FormItem
          label="项目Id"
        >
          {
            getFieldDecorator('projectId', {
              initialValue: editData && editData.projectId,
              rules: [{required: true, message: '请输入项目Id'}]
            })(
              <Input />
            )
          }
        </FormItem>
        <FormItem
          label="标题"
        >
          {
            getFieldDecorator('title', {
              initialValue: editData && editData.title,
              rules: [{required: true, message: '请输入标题'}]
            })(
              <Input />
            )
          }
        </FormItem>
        <FormItem
          label="图标"
        >
          {
            getFieldDecorator('img', {
              initialValue: editData && editData.img,
              rules: [{required: true, message: '请输入图标地址'}]
            })(
              <Input />
            )
          }
        </FormItem>
        <FormItem
          label="项目地址"
        >
          {
            getFieldDecorator('link', {
              initialValue: editData && editData.link,
              rules: [{required: true, message: '请输入项目地址'}]
            })(
              <Input />
            )
          }
        </FormItem>
        <FormItem
          label="项目状态"
        >
          {
            getFieldDecorator('status', {
              initialValue: editData && editData.status,
              rules: [{required: true}]
            })(
              <Select>
                <Option value={0}>进行中</Option>
                <Option value={1}>长期</Option>
                <Option value={2}>已完结</Option>
              </Select>
            )
          }
        </FormItem>
        <FormItem
          label="描述"
        >
          {
            getFieldDecorator('content', {
              initialValue: editData && editData.content,
              rules: [{required: false, message: '请输入描述'}]
            })(
              <Input />
            )
          }
        </FormItem>
        <FormItem>
          <Button
            type="primary"
            htmlType="submit"
            loading={loading}
            style={{float: 'right'}}
          >
            提交
          </Button>
        </FormItem>
      </Form>
    )
  }
}

const WrapperProjectForm = Form.create()(ProjectForm)

export default WrapperProjectForm;